<template>
	<view>
		<div class="top">
			<img class="bg-top" src="../static/bg-top.png" alt="bg">
			<view class="page-title">
				<p>{{villageName}}</p>
				<p class="sub-title">数字乡村数据大屏</p>
			</view>
			<img v-if="sensitive == 0" src="../static/logo.png" alt="logo" class="logo">

			<div class="time-weather">
				<div class="time-box time-box-after">
					<div class="time">{{ time }}</div>
					<div class="date">{{ date }}</div>
				</div>
				<div class="weather-box">
					<div class="weather">{{ weather }}</div>
					<div class="temperature">{{ temperature }}</div>
				</div>
			</div>
		</div>
		<div class="nav-data-list">
			<img src="../static/decorate-left.png" alt="decorate" class="decorate">
			<div class="nav-data-item" @click="showCarList = true">
				<div @click="clickType(0)" style="cursor: pointer; position: relative; z-index: 2;">月卡用户</div>
				<div @click="clickType(0)" style="cursor: pointer; position: relative; z-index: 2;" class="blue">
					{{ homeTopData.monthCardUser }}
					<img src="@/static/icon-09.png" alt="">
				</div>
				<div>
					<div @click="clickType(2)" style="cursor: pointer;">黑名单：<text class="blue">{{ homeTopData.blackList }}</text></div>
					<div @click="clickType(1)" style="cursor: pointer;">白名单：<text class="blue">{{ homeTopData.whiteList }}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>今日巡更</div>
				<div class="blue">{{ homeTopData.todayXG }}</div>
				<div>
					<div>本周巡更：<text class="blue">{{ homeTopData.weekXG }}</text></div>
					<div>本月巡更：<text class="blue">{{ homeTopData.monthXG }}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本月日常查处</div>
				<div class="orange">{{ homeTopData.monthInv }}</div>
				<div>
					<div @click="showRcglList = !showRcglList, rcglType = 2, noDate = false" style="cursor: pointer">待指派：<text class="orange">{{ homeTopData.monthInv_ZP }}</text></div>
					<div @click="showRcglList = !showRcglList, rcglType = 2, noDate = false" style="cursor: pointer">跟进中：<text class="white">{{ homeTopData.monthInv_GJ }}</text></div>
					<div @click="showRcglList = !showRcglList, rcglType = 2, noDate = false" style="cursor: pointer">已完成：<text class="blue">{{ homeTopData.monthInv_WC }}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本月投诉建议</div>
				<div class="orange">{{ homeTopData.monthSugg }}</div>
				<div>
					<div @click="showTsjyList = !showTsjyList, tsjyType = 0, noDate = false" style="cursor: pointer">待指派：<text class="orange">{{ homeTopData.monthSugg_ZP }}</text></div>
					<div @click="showTsjyList = !showTsjyList, tsjyType = 1, noDate = false" style="cursor: pointer">跟进中：<text class="white">{{ homeTopData.monthSugg_GJ }}</text></div>
					<div @click="showTsjyList = !showTsjyList, tsjyType = 3, noDate = false" style="cursor: pointer">已完成：<text class="blue">{{ homeTopData.monthSugg_WC }}</text></div>
				</div>
			</div>
			<div class="nav-data-item" style="z-index: 60;cursor: pointer;" @click.stop="checkDetail">
				<div>本月治安治理</div>
				<div class="orange">{{ homeTopData.monthSecurity }}</div>
				<div>
					<div><text class="blue">查看详情</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本月逃欠金额(元)</div>
				<div class="yellow">{{ homeTopData.debtAmount }}</div>
				<div>
					<div @click="showTfjlList = true" style="cursor: pointer;">逃费次数：<text class="blue">{{ homeTopData.dodgeFeeCount }}</text></div>
					<!-- <div>逃费金额：<text class="blue">¥{{homeTopData.dodgeFee}}</text></div> -->
				</div>
			</div>
			<img src="../static/decorate-right.png" alt="decorate" class="decorate">
		</div>

		<div class="tsjy-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>投诉建议</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="tsjy-nav-list">
					<div class="tsjy-nav-item" @click="showTsjyList = !showTsjyList, tsjyType = -1, noDate = false" style="cursor: pointer">
						<img src="../static/icon-04.png" alt="icon" class="icon">
						<div class="dark-blue">{{ tsjyHeadData.total }}</div>
						<div>总数</div>
					</div>
					<div class="tsjy-nav-item" @click="showTsjyList = !showTsjyList, tsjyType = 0, noDate = false" style="cursor: pointer">
						<img src="../static/icon-05.png" alt="icon" class="icon">
						<div class="orange">{{ tsjyHeadData.assigned }}</div>
						<div>待指派</div>
					</div>
					<div class="tsjy-nav-item" @click="showTsjyList = !showTsjyList, tsjyType = 1, noDate = false" style="cursor: pointer">
						<img src="../static/icon-06.png" alt="icon" class="icon">
						<div class="blue">{{ tsjyHeadData.followUp }}</div>
						<div>跟进中</div>
					</div>
					<div class="tsjy-nav-item" @click="showTsjyList = !showTsjyList, tsjyType = 3, noDate = false" style="cursor: pointer">
						<img src="../static/icon-07.png" alt="icon" class="icon">
						<div class="blue">{{ tsjyHeadData.finish }}</div>
						<div>已完成</div>
					</div>
				</div>

				<div class="tsjy-echart-list">
					<div id="tsjy-echart-left" ref="tsjyEchartLeft"></div>
					<div id="tsjy-echart-right" ref="tsjyEchartRight"></div>
				</div>

				<div class="tsjy-swiper-nav">
					<div>序号</div>
					<div>分类名称</div>
					<div>车牌号码</div>
					<div>内容描述</div>
					<div>创建时间</div>
					<div>状态</div>
				</div>

				<swiper class="tsjy-swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
					:vertical="true" display-multiple-items="5" :disable-touch="true">
					<swiper-item v-for="(item, index) of swiperList">
						<view class="swiper-item">
							<div>{{ item.number }}</div>
							<div>{{ item.sunTypeName }}</div>
							<div>{{ item.carNumber ? item.carNumber : '--' }}</div>
							<div>{{ item.content }}</div>
							<div>{{ item.createTime }}</div>
							<div
								:class="{ 'orange': item.statusName == '待指派', 'blue': item.statusName == '已完成', 'white': item.statusName == '跟进中','red':item.statusName=='已逾期' }">
								{{ item.statusName }}
							</div>
						</view>
					</swiper-item>
				</swiper>

			</div>
		</div>

		<div class="clll-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>车辆流量</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="main-data-list">
					<div>
						<div class="blue">{{ clllEchartHear.monthInCount }}</div>
						<div>本月入场数</div>
					</div>
					<div>
						<div class="blue">{{ clllEchartHear.monthOutCount }}</div>
						<div>本月出场数</div>
					</div>
					<div>
						<div class="orange">{{ clllEchartHear.practicalAmount }}</div>
						<div>今日月卡金额</div>
					</div>
					<div>
						<div class="orange">{{ clllEchartHear.discountsAmount }}</div>
						<div>本月月卡金额</div>
					</div>
				</div>
				<div class="select-time">
					<div @click="showClllTimeFn">
						<block v-if="!showClllTime">{{ yearList[clllTime[0]] }}年{{ monthList[clllTime[1]] }}月</block>
						<block v-if="showClllTime">确定</block>
					</div>
					<div @click="showClllTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showClllTime"
						:value="clllTime" @change="changeClllTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item of monthList" class="pick-item">{{ item }}月</view>
						</picker-view-column>
					</picker-view>
				</div>
				<div id="clll-echart" ref="clllEchart"></div>
			</div>
		</div>

		<div class="rcgl-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>日常管理</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="main-data-list">
					<div @click="showRcglList = !showRcglList, timeType = 0, noDate = false">
						<div class="blue">{{ rcglHeadData.todayCount }}</div>
						<div>今日查处</div>
					</div>
					<div @click="showRcglList = !showRcglList, timeType = 1, noDate = false">
						<div class="blue">{{ rcglHeadData.weekCount }}</div>
						<div>本周查处</div>
					</div>
					<div @click="showRcglList = !showRcglList, timeType = 2, noDate = false">
						<div class="blue">{{ rcglHeadData.monthCount }}</div>
						<div>本月查处</div>
					</div>
				</div>

				<div class="select-time-type">
					<div :class="{ 'selected-time-type': showRcglYearMonth }" @click="showRcglYearMonthFn(true)">月度
					</div>
					<div :class="{ 'selected-time-type': !showRcglYearMonth }" @click="showRcglYearMonthFn(false)">年度
					</div>
				</div>

				<div class="select-time" v-if="showRcglYearMonth">
					<div @click="showRcglTimeFn">
						<block v-if="!showRcglTime">{{ yearList[rcglTime[0]] }}年{{ monthList[rcglTime[1]] }}月</block>
						<block v-if="showRcglTime">确定</block>
					</div>
					<div @click="showRcglTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showRcglTime"
						:value="rcglTime" @change="changeRcglTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item of monthList" class="pick-item">{{ item }}月</view>
						</picker-view-column>
					</picker-view>
				</div>
				<div class="select-time" style="top: 2.777vh;" v-if="!showRcglYearMonth">
					<div @click="showRcglTimeFn">
						<block v-if="!showRcglTime">{{ yearList[rcglTime[0]] }}年</block>
						<block v-if="showRcglTime">确定</block>
					</div>
					<div @click="showRcglTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showRcglTime"
						:value="rcglTime" @change="changeRcglTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item" style="width: 100%;">{{ item }}年</view>
						</picker-view-column>
					</picker-view>
				</div>
				<div id="rcgl-echart-left" ref="rcglEchartLeft"></div>
				<div id="rcgl-echart-right" ref="rcglEchartRight"></div>
			</div>
		</div>

		<img src="../static/bg-bottom.png" alt="bottom" class="bottom-img">

		<div v-if="detailStatus" class="maskLayer" @click.stop="detailStatus = false;showZazlTimeType = false;">
			<div class="maskLayer-detail" @click.stop="">
				<!-- 顶部 -->
				<div class="maskLayer-detailTop">
					<div class="box-title">
						<div class="triangle"></div>
						<div>治安治理</div>
					</div>
					<!-- 关闭按钮 -->
					<div class="close-item hoverClass" @click.stop="detailStatus = false">
						<img class="close" src="../static/icon-close.png" mode="">
					</div>
				</div>
				<!-- input -->
				<div class="maskLayer-detail-input">
					<div class="maskLayer-detail-inputLeft hoverClass">
						<div @click.stop="showZazlTimeType = !showZazlTimeType">
							<text
								:style="{ 'color': zazlTimeType == '请选择' ? 'rgba(255,255,255,.3)' : '#fff' }">{{ zazlTimeType }}
								<div class="triangle"
									:style="showZazlTimeType ? 'transform: rotate(180deg);bottom: 30%;' : 'top: 50%;'">
								</div>
							</text>

							<div class="select-date-type" v-if="showZazlTimeType">
								<div :class="{ 'selected-date-type': zazlTimeType == '年份' }"
									@click.stop="zazlTimeType = '年份', showZazlTimeType = false, showZazlYearMonth = false, zazlTime = '确定'">
									年份
								</div>
								<div :class="{ 'selected-date-type': zazlTimeType == '月份' }"
									@click.stop="zazlTimeType = '月份', showZazlTimeType = false, showZazlYearMonth = true, zazlTime = '确定'">
									月份
								</div>
							</div>
						</div>
						<div :style="{ 'color': zazlTime == '请选择日期' ? 'rgba(255,255,255,.3)' : '#fff' }"
							@click.stop="confirmZazlTime">
							<img src="@/static/icon-date.png" alt="icon" />
							<!-- <block v-if="!showZazlTime">{{ yearList[rcglTime[0]] }}年{{ monthList[rcglTime[1]] }}月</block> -->
							<!-- <block v-if="showZazlTime">确定</block> -->
							{{ zazlTime }}
						</div>


						<div class="select-time" v-if="showZazlYearMonth && zazlTime == '确定'">
							<picker-view class="pick-time" indicator-class="pitch-item"
								mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;"
								:value="zazlTimeIndex" @change="changeZazlTime">
								<picker-view-column>
									<view v-for="item of yearList" class="pick-item">{{ item }}年</view>
								</picker-view-column>
								<picker-view-column>
									<view v-for="item of monthList" class="pick-item">{{ item }}月</view>
								</picker-view-column>
							</picker-view>
						</div>
						<div class="select-time" v-if="!showZazlYearMonth && zazlTime == '确定'">
							<picker-view class="pick-time" indicator-class="pitch-item"
								mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;"
								:value="zazlTimeIndex" @change="changeZazlTime">
								<picker-view-column>
									<view v-for="item of yearList" class="pick-item" style="width: 100%;">{{ item }}年
									</view>
								</picker-view-column>
							</picker-view>
						</div>
					</div>
					<div class="maskLayer-detail-inputRight hoverClass">
						<div @click="resetZazl">重置</div>
						<div @click="searchZazl">搜索</div>
					</div>
				</div>
				<!-- list -->
				<div class="maskLayer-detail-list zazl-list">
					<div class="maskLayer-detail-title">
						<div>序号</div>
						<div>标题</div>
						<div>内容描述</div>
						<div>现场照片</div>
						<div>现场视频</div>
						<div>上报人员</div>
						<div>上报时间</div>
						<div>操作</div>
					</div>
					<div v-if="zazlList.length != 0"  class="maskLayer-list-box">
						<div v-for="(item, index) in zazlList" :key="index" class="maskLayer-detail-title"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{ item.serialNumber }}</div>
							<div>{{ item.title }}</div>
							<div>{{ item.content }}</div>
							<div>{{ item.picCount }}</div>
							<div>{{ item.videoCount }}</div>
							<div>{{ item.createUser }}</div>
							<div>{{ item.createTime }}</div>
							<div class="blue hoverClass" @click="showPic(index)">查看图片视频</div>
						</div>
					</div>
					<div v-else class="noData">
						暂无数据
					</div>
				</div>
				<!-- 分页 -->
				<view class="pages-box">
					<view class="pages">
						<view class="pages-total">共{{total}}个结果</view>
						<Pagination class=" hoverClass" :total="total" :pageSize="pageSize" :nowPage="nowPage"
							@change="change">
						</Pagination>
						<view class="pagesSize">
							<view class="">前往</view>
							<input type="number" v-model="nowPageNum" @confirm="changeSearch()">
							<view class="">页</view>
						</view>
					</view>
				</view>
			</div>
		</div>


		<div v-if="showCarList" class="maskLayer" @click.stop="detailStatus = false;showCarList = false;">
			<div class="maskLayer-detail" @click.stop="">
				<!-- 顶部 -->
				<div class="maskLayer-detailTop">
					<div class="box-title">
						<div class="triangle"></div>
						<div>车辆登记名单管理</div>
					</div>
					<!-- 关闭按钮 -->
					<div class="close-item hoverClass" @click.stop="showCarList = false">
						<img class="close" src="../static/icon-close.png" mode="">
					</div>
				</div>
				<!-- input -->
				<div class="maskLayer-detail-input">
					<div style="display: flex;">
						<input class="car-input" v-model="carKeyword" type="text" placeholder="请输入车牌号码"
							placeholder-class="placeholder">
						<div class="car-card-list">
							<div :class="{'car-card-select': carListType == 0}" @click='clickType(0)'>月卡</div>
							<div :class="{'car-card-select': carListType == 1}" @click='clickType(1)'>白名单</div>
							<div :class="{'car-card-select': carListType == 2}" @click='clickType(2)'>黑名单</div>
						</div>
					</div>
					<div class="maskLayer-detail-inputRight hoverClass">
						<div @click="resetCarList">重置</div>
						<div @click="searchCarList">搜索</div>
					</div>
				</div>
				<!-- list -->
				<div class="maskLayer-detail-list car-list-white" v-show='carListType != 2'>
					<div class="maskLayer-detail-title car-list-nav">
						<div>序号</div>
						<div>车牌号码</div>
						<div>用户名称</div>
						<div>手机号码</div>
						<div>套餐名称</div>
						<div>有效开始日期</div>
						<div>有效截止日期</div>
						<div>备注</div>
					</div>
					<div v-if="carList.length != 0"
						 class="maskLayer-list-box">
						<div v-for="(item, index) in carList" :key="index" class="maskLayer-detail-title car-list-nav"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{ item.serialNumber }}</div>
							<div>{{ item.carNumber }}</div>
							<div>{{ item.personName }}</div>
							<div>{{ item.phone }}</div>
							<div>{{ item.basicTcName }}</div>
							<div>{{ item.startTime }}</div>
							<div>{{ item.endTime }}</div>
							<div>{{ item.remark?item.remark:'-' }}</div>
						</div>
					</div>
					<div v-else class="noData">
						暂无数据
					</div>
				</div>
				<div class="maskLayer-detail-list car-list-black" v-show='carListType == 2'>
					<div class="maskLayer-detail-title car-list-nav">
						<div>序号</div>
						<div>车牌号码</div>
						<div>名单类型</div>
						<div>开始日期</div>
						<div>结束日期</div>
						<div>操作人员</div>
						<div>操作时间</div>
						<div>备注</div>
					</div>
					<div v-if="carList.length != 0"
						 class="maskLayer-list-box">
						<div v-for="(item, index) in carList" :key="index" class="maskLayer-detail-title car-list-nav"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{ item.serialNumber }}</div>
							<div>{{ item.carNumber }}</div>
							<div>黑名单</div>
							<div>{{ item.startTime }}</div>
							<div>{{ item.endTime }}</div>
							<div>{{ item.operateName }}</div>
							<div>{{ item.operateTime }}</div>
							<div>{{ item.remark?item.remark:'-' }}</div>
						</div>
					</div>
					<div v-else class="noData">
						暂无数据
					</div>
				</div>
				<!-- 分页 -->
				<view class="pages-box">
					<view class="pages">
						<view class="pages-total">共{{carTotal}}个结果</view>
						<Pagination class=" hoverClass" :total="carTotal" :pageSize="pageSize" :nowPage="carNowPage"
							@change="changeCarList">
						</Pagination>
						<view class="pagesSize">
							<view class="">前往</view>
							<input type="number" v-model="carNowPageNum" @confirm="changeCarListSearch()">
							<view class="">页</view>
						</view>
					</view>
				</view>
			</div>
		</div>

		<!-- 视频图片 -->
		<div v-if="imageStatus" style="z-index: 99;" class="maskLayer" @click.stop="imageStatus = false">
			<div class="maskLayer-image" @click.stop="">
				<!-- 顶部 -->
				<div class="maskLayer-detailTop">
					<div class="box-title">
						<div class="triangle"></div>
						<div>现场图片视频</div>
					</div>
					<!-- 关闭按钮 -->
					<div class="close-item hoverClass" @click.stop="imageStatus = false">
						<img class="close" src="../static/icon-close.png" mode="">
					</div>
				</div>
				<!-- 现场照片 -->
				<div class="maskLayer-imageNew">
					<div>现场照片</div>
					<div>
						<img v-for="(item, index) in zazlList[zazlImageIndex].pic" :key="item.bigImg" :src="item.bigImg"
							@click="checkBigImg(index)">
					</div>
				</div>
				<!-- 现场照片 -->
				<div class="maskLayer-imageNew">
					<div>现场视频</div>
					<div>
						<div v-for="(item, index) in zazlList[zazlImageIndex].video" :key="item.bigImg"
							@click="checkBigVideo(index)">
							<video :src="item.bigImg" mode="widthFix" :autoplay="false" muted></video>
						</div>
						<!-- <div v-for="(item, index) in zazlList[zazlImageIndex].videoFm" :key="item.bigImg"
							@click="checkBigVideo(index)">
							<img :src="item.bigImg">
							<img src="@/static/icon-play.png" alt="play" />
						</div> -->
					</div>
				</div>
			</div>
		</div>

		<!-- 图片框 -->
		<view v-if="isImage" class="imageBox" @click="isImage = false">
			<view class="" @click.stop="switchIndex(0)">
				<img src="../static/bt-left.png" mode="">
			</view>
			<view class="imageBox-cont" @click.stop="">
				<img :src="zazlList[zazlImageIndex].pic[imageIndex].bigImg" mode="widthFix">
				<view class="">{{ imageIndex + 1 }}/{{ zazlList[zazlImageIndex].pic.length }}</view>
			</view>
			<view class="" @click.stop="switchIndex(1)">
				<img src="../static/bt-right.png" mode="">
			</view>
		</view>
		<!-- 视频框 -->
		<view v-if="isVideo" class="imageBox" @click="isVideo = false">
			<view class="" @click.stop="switchIndex(0)">
				<img src="../static/bt-left.png" mode="">
			</view>
			<view class="imageBox-cont" @click.stop="">
				<video :src="zazlList[zazlImageIndex].video[videoIndex].bigImg" mode="widthFix" autoplay muted></video>
				<view class="">{{ videoIndex + 1 }}/{{ zazlList[zazlImageIndex].video.length }}</view>
			</view>
			<view class="" @click.stop="switchIndex(1)">
				<img src="../static/bt-right.png" mode="">
			</view>
		</view>

		<TSJYList :show="showTsjyList" @hideTsjy="hideTsjy" :type="tsjyType" :userType="3"
			:projectList="villageList" :villageId="villageId" @reset="resetList"
			:year="yearList[tsjyTime[0]]" :month="monthList[tsjyTime[1]]"
			:noDate="noDate"></TSJYList>
		<RCGLList :show="showRcglList" :timeType="timeType" @hide="hideRcgl" :type="rcglType" :userType="3"
			:projectList="villageList" :villageId="villageId" @reset="resetList" :noDate="noDate"></RCGLList>
		<TFJLList :show="showTfjlList" @hide="hideTfjl" :userType="3" :projectList="villageList" :villageId="villageId">
		</TFJLList>
	</view>
</template>

<script>
	import * as echart from 'echarts'
	import '@/static/echarts-tooltip-carousel.js'
	import Pagination from "@/components/bwm-pagination/bwm-pagination.vue" // 分页组件
	import TSJYList from '@/components/TSJYList'
	import RCGLList from '@/components/RCGLList'
	import TFJLList from '@/components/TFJLList'

	let clllEchartTools = null
	let tsjyEchartTools = null
	let rcglEchartRightTools = null
	export default {
		components: {
			Pagination,
			TSJYList,
			RCGLList,
			TFJLList,
		},
		data() {
			return {
				sensitive: 0,
				url: getApp().globalData.url,

				villageName: '',
				detailStatus: false, // 详情状态 
				imageStatus: false, // 详情状态
				// ----- 分页 ----- //
				total: 10, // 项目列表总页数
				pageSize: 10, // 项目列表每页条数
				nowPage: 1, // 项目列表当前页码
				nowPageNum: 1, // 项目列表当前页码
				time: '',
				date: '',
				weather: '',
				temperature: '',
				showVillageList: false,
				selectVillageIndex: 0,
				villageId: 25,
				villageList: [],
				yearList: [],
				monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				homeTopData: {},

				showTfjlList: false,

				showZazlTimeType: false,
				zazlTimeType: '请选择',
				showZazlTime: false,
				showZazlYearMonth: -1,
				zazlTime: '请选择日期',
				zazlTimeIndex: [9, 0],
				zazlList: [], // 治安治理列表数据
				zazlImageIndex: -1, // 治安治理图片列表索引
				isImage: false, // 是否显示大图
				imageIndex: 0, // 显示大图索引
				isVideo: false, // 是否显示视频
				videoIndex: 0, // 显示视频索引

				showCarList: false,
				carListType: 0,
				carTotal: 0,
				carKeyword: '',
				carNowPage: 1,
				carNowPageNum: 1, // 项目列表当前页码
				carList: [],


				showClllTime: false,
				clllTime: [9, 0],
				clllEchart: null,
				clllEchartHear: {},
				clllEchartOption: {
					grid: {
						top: '40%',
						bottom: 30,
						left: 60,
						right: 60,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						backgroundColor: 'rgba(0, 21, 43, 0.80)',
						borderColor: 'rgba(43,142,243,0.5)',
						// borderWidth: 2,
						textStyle: {
							color: 'rgba(153, 153, 153, 1)',
							fontSize: 10,
							lineHeight: 14
						},
					},
					legend: {
						top: '27%',
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
						data: [{
							name: '入场数(辆)',
							itemStyle: {
								color: '#2BC5F3'
							}
						}, {
							name: '出场数(辆)',
							itemStyle: {
								color: '#1D7AD9'
							}
						}, {
							name: '月卡金额',
							itemStyle: {
								color: '#FD8F21'
							}
						}, 
						// {
						// 	name: '优惠金额(元)',
						// 	itemStyle: {
						// 		color: '#FDDB21'
						// 	}
						// },
						]
					},
					xAxis: {
						data: ['1日', '2日', '3日', '4日', '5日', '6日'],
						axisLine: {
							lineStyle: {
								color: '#ccc'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						}
					},
					yAxis: [
						{
							type: 'value',
							name: '单位:辆',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#1D7AD9'
								}
							},
							minInterval: 1,
							splitLine: {
								lineStyle: {
									color: 'rgba(204, 204, 204, .3)',
									type: 'dashed'
								}
							},
							nameTextStyle: {
								color: '#fff',
								fontSize: 12
							},
							axisLabel: {
								color: '#fff',
								fontSize: 12,
							},
							// min: 0,
							// max: 250,
							// interval: 50,
							// axisLabel: {
							//   formatter: '{value} ml'
							// }
						},
						{
							type: 'value',
							name: '单位:元',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#AF6113'
								}
							},
							minInterval: 1,
							splitLine: {
								show: false,
							},
							nameTextStyle: {
								color: '#fff',
								fontSize: 12
							},
							axisLabel: {
								color: '#fff',
								fontSize: 12,
							}
							// min: 0,
							// max: 25,
							// interval: 5,
							// axisLabel: {
							//   formatter: '{value} °C'
							// }
						}
					],
					series: [
						{
							name: '入场数(辆)',
							type: 'bar',
							barGap: 0,
							data: [5, 20, 36, 10, 10, 20],
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: '出场数(辆)',
							type: 'bar',
							barGap: 0,
							data: [10, 40, 46, 20, 20, 30],
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(29, 122, 217, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: '月卡金额',
							type: 'line',
							symbol: 'circle',
							symbolSize: 4,
							yAxisIndex: 1,
							itemStyle: {
								color: 'rgba(253, 143, 33, 1)',
								borderWidth: 0,
							},
							lineStyle: {
								color: 'rgba(253, 143, 33, 1)',
							},
							data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, ]
						},
						// {
						// 	name: '优惠金额(元)',
						// 	type: 'line',
						// 	symbol: 'circle',
						// 	symbolSize: 4,
						// 	yAxisIndex: 1,
						// 	itemStyle: {
						// 		color: 'rgba(253, 219, 33, 1)',
						// 		borderWidth: 0,
						// 	},
						// 	lineStyle: {
						// 		color: 'rgba(253, 219, 33, 1)',
						// 	},
						// 	data: [4.0, 4.4, 6.6, 8.5, 12.3, 23.2, ]
						// },
					],
				},

				showTsjyList: false,
				tsjyType: -1,
				noDate: false,
				showTsjyTime: false,
				tsjyTime: [9, 0],
				tsjyHeadData: {},
				tsjyEchartLeft: null,
				tsjyEchartLeftOption: {
					tooltip: {
						confine: true,
						extraCssText: 'z-index: 888',
						trigger: 'item',
						formatter: '{b|{b}}\n{c|{c}}  {per|{d}%}  ',
						backgroundColor: 'rgba(0,21,43,0.8)',
						borderColor: 'rgba(221,247,255,0.4)',
						padding: [4, 8],
						borderWidth: 1,
						borderRadius: 4,
						textStyle: {
							color: '#DDF7FF',
						},
					},
					legend: {
						top: 0,
						padding: [5, 20, 5, 5],
						// data: ['已逾期', '跟进中', '待指派', '已完成',],
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
					},
					series: [{
						name: '跟进状态',
						type: 'pie',
						radius: ['0%', '60%'],
						center: ['50%', '54%'],
						avoidLabelOverlap: false,
						labelLine: {
							show: true,
						},
						label: {
							show: true,
							formatter: '{b|{b}} {per|{d}%} ',
							rich: {
								b: {
									fontSize: 10,
									color: 'inherit',
								},
								per: {
									fontSize: 10,
									color: 'inherit',
								},
							},
						},
						data: [{
								value: 123,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								},
								label: {
									show: true,
								},
								labelLine: {
									show: true,
								},
							},
							{
								value: 123,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								},
								label: {
									show: true,
								},
								labelLine: {
									show: true,
								},
							},
							{
								value: 123,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								},
								label: {
									show: true,
								},
								labelLine: {
									show: true,
								},
							},
							{
								value: 0,
								name: '已逾期',
								itemStyle: {
									color: '#FD5421'
								}
							},
						]
					}, ]
				},
				tsjyEchartRight: null,
				tsjyEchartRightOption: {
					tooltip: {
						confine: true,
						extraCssText: 'z-index: 888',
						trigger: 'item',
						formatter: '{b|{b}}\n{c|{c}}  {per|{d}%}  ',
						backgroundColor: 'rgba(0,21,43,0.8)',
						borderColor: 'rgba(221,247,255,0.4)',
						padding: [4, 8],
						borderWidth: 1,
						borderRadius: 4,
						textStyle: {
							color: '#DDF7FF',
						},
					},
					legend: {
						top: 0,
						padding: [5, 20, 5, 5],
						// data: ['已逾期', '跟进中', '待指派', '已完成',],
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
					},
					series: [{
						name: '违停类型',
						type: 'pie',
						radius: ['40%', '60%'],
						center: ['50%', '55%'],
						avoidLabelOverlap: false,
						labelLine: {
							show: true,
						},
						label: {
							show: true,
							formatter: '{b|{b}}\n {c|{c}}{per|({d}%)} ',
							rich: {
								b: {
									fontSize: 10,
									lineHeight: 14,
									color: 'inherit',
								},
								c: {
									fontSize: 10,
									lineHeight: 14,
									color: 'inherit',
									textAlign: 'left',
								},
								per: {
									fontSize: 8,
									color: 'inherit',
									textAlign: 'left',
								},
							},
						},
						data: [{
								value: 123,
								name: '逃费查处',
								itemStyle: {
									color: '#2BC5F3'
								}
							},
							{
								value: 123,
								name: '违停查处',
								itemStyle: {
									color: '#1D7AD9'
								}
							},
							{
								value: 123,
								name: '乱放行为',
								itemStyle: {
									color: '#6FB6FF'
								}
							},
							{
								value: 123,
								name: '乱停行为',
								itemStyle: {
									color: '#5852FF'
								}
							}
						]
					}]
				},

				showRcglList: false,
				rcglType: -1,
				timeType: -1,
				showRcglTime: false,
				showRcglYearMonth: true,
				rcglTime: [9, 0],
				rcglHeadData: {},
				swiperList: [],
				rcglEchartLeft: null,
				rcglEchartLeftOption: {
					tooltip: {
						confine: true,
						extraCssText: 'z-index: 888',
						trigger: 'item',
						formatter: '{b|{b}}\n{c|{c}}  {per|{d}%}  ',
						backgroundColor: 'rgba(0,21,43,0.8)',
						borderColor: 'rgba(221,247,255,0.4)',
						padding: [4, 8],
						borderWidth: 1,
						borderRadius: 4,
						textStyle: {
							color: '#DDF7FF',
						},
					},
					legend: {
						top: 10,
						padding: [5, 15, 5, 5],
						data: ['待指派', '跟进中', '已完成', '已逾期'],
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
					},
					series: [{
							name: '跟进状态',
							type: 'pie',
							radius: ['0%', '40%'],
							center: ['50%', '55%'],
							avoidLabelOverlap: false,
							labelLine: {
								show: false,
							},
							label: {
								show: false,
							},
							data: [{
									value: 123,
									name: '待指派',
									itemStyle: {
										color: '#FD8F21'
									}
								},
								{
									value: 123,
									name: '跟进中',
									itemStyle: {
										color: '#DDF7FF'
									}
								},
								{
									value: 123,
									name: '已完成',
									itemStyle: {
										color: '#26DDF2'
									}
								},
								{
									value: 0,
									name: '已逾期',
									itemStyle: {
										color: '#FD5421'
									}
								},
							]
						},
						{
							name: '违停类型',
							type: 'pie',
							radius: ['50%', '60%'],
							center: ['50%', '55%'],
							avoidLabelOverlap: false,
							labelLine: {
								show: false,
							},
							tooltip: {
								confine: true,
								show: true,
							},
							labelLine: {
								show: true,
							},
							label: {
								show: true,
								formatter: '{b|{b}}\n {c|{c}}{per|({d}%)} ',
								rich: {
									b: {
										fontSize: 10,
										lineHeight: 14,
										color: 'inherit',
									},
									c: {
										fontSize: 10,
										lineHeight: 14,
										color: 'inherit',
										textAlign: 'left',
									},
									per: {
										fontSize: 8,
										color: 'inherit',
										textAlign: 'left',
									},
								},
							},
							data: [{
									value: 123,
									name: '逃费查处',
									itemStyle: {
										color: '#2BC5F3'
									}
								},
								{
									value: 123,
									name: '违停查处',
									itemStyle: {
										color: '#1D7AD9'
									}
								},
								{
									value: 123,
									name: '乱放行为',
									itemStyle: {
										color: '#6FB6FF'
									}
								},
								{
									value: 123,
									name: '乱停行为',
									itemStyle: {
										color: '#5852FF'
									}
								}
							]
						}
					]
				},
				rcglEchartRight: null,
				rcglEchartRightOption: {
					grid: {
						top: '27%',
						bottom: 30,
						left: 70,
						right: 30,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						backgroundColor: 'rgba(0, 21, 43, 0.80)',
						borderColor: 'rgba(43,142,243,0.5)',
						// borderWidth: 2,
						textStyle: {
							color: 'rgba(153, 153, 153, 1)',
							fontSize: 10,
							lineHeight: 14
						},
					},
					legend: {
						top: 25,
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
						data: [{
							name: '巡更次数',
							itemStyle: {
								color: '#2BC5F3'
							}
						}]
					},
					xAxis: {
						data: ['大岭村委', '凌岗村委', '濠头村委', '张家边张家边', '濠头村委', '凌岗村委'],
						axisLabel: {
							color: '#fff',
							fontSize: 12,
							margin: 19,
							formatter: function(value) {
								let valueTxt = '';
								if (value.length > 4) {
									valueTxt = value.substring(0, 3) + '...';
								} else {
									valueTxt = value;
								}
								return valueTxt;
							}
						},
						axisLine: {
							lineStyle: {
								color: '#fff'
							}
						},
						axisTick: {
							show: false
						},
					},
					yAxis: {
						type: 'value',
						name: '单位:单',
						splitLine: {
							lineStyle: {
								color: 'rgba(204, 204, 204, .3)',
								type: 'dashed'
							}
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#fff'
							}
						},
						nameTextStyle: {
							color: '#fff',
							fontSize: 12
						},
					},
					series: [{
						name: '巡更次数',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20],
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					}, ]
				}
			}
		},
		watch: {
			clllEchartOption: {
				handler(newValue, oldValue) {
					this.clllEchart.clear()
					this.clllEchart.setOption(newValue);
					if(clllEchartTools) {
						clllEchartTools.clearLoop(clllEchartTools.timeTicket)
					}
					clllEchartTools = tools.loopShowTooltip(this.clllEchart, newValue, {
						loopSeries: true
					});
				},
				deep: true
			},
			tsjyEchartLeftOption: {
				handler(newValue, oldValue) {
					this.tsjyEchartLeft.setOption(newValue);
				},
				deep: true
			},
			tsjyEchartRightOption: {
				handler(newValue, oldValue) {
					this.tsjyEchartRight.setOption(newValue);
					// tsjyEchartTools.clearLoop()
					// tsjyEchartTools = tools.loopShowTooltip(this.tsjyEchartRight, this.tsjyEchartRightOption, {
					// 	loopSeries: true
					// });
				},
				deep: true
			},
			rcglEchartLeftOption: {
				handler(newValue, oldValue) {
					this.rcglEchartLeft.setOption(newValue);
				},
				deep: true
			},
			rcglEchartRightOption: {
				handler(newValue, oldValue) {
					this.rcglEchartRight.setOption(newValue);
					if(rcglEchartRightTools) {
						rcglEchartRightTools.clearLoop(rcglEchartRightTools.timeTicket)
					}
					rcglEchartRightTools = tools.loopShowTooltip(this.rcglEchartRight, newValue, {
						loopSeries: true
					});
				},
				deep: true
			},
		},
		onLoad() {
			this.sensitive = this.getQueryVariable('sensitive') ? this.getQueryVariable('sensitive') : 0
			const date = new Date()
			const year = date.getFullYear()
			for (let i = 0; i < 10; i++) {
				this.yearList = [year - i, ...this.yearList]
			}
			this.clllTime = [9, date.getMonth()]
			this.tsjyTime = [9, date.getMonth()]
			this.rcglTime = [9, date.getMonth()]

			// if (window.location.href.split('=').length == 2) {
			// 	this.villageId = Number(window.location.href.split('=')[1])
			// } else {
			// 	this.villageId = 25
			// }
			this.villageId = Number(this.getQueryVariable('id'))

			this.getTime();
			setInterval(_ => {
				this.getTime();
			}, 10)
			this.getTemperature();

			setTimeout(_ => {
				// if (this.clllEchart) { //关键步骤
				//     this.clllEchart.dispose()
				//     this.clllEchart = null
				// }
				this.clllEchart = this.$echarts.init(this.$refs.clllEchart);
				// this.clllEchart.setOption(this.clllEchartOption);
				// clllEchartTools = tools.loopShowTooltip(this.clllEchart, this.clllEchartOption, {
				//     loopSeries: true
				// });

				this.tsjyEchartLeft = this.$echarts.init(this.$refs.tsjyEchartLeft);
				// this.tsjyEchartLeft.setOption(this.tsjyEchartLeftOption);

				this.tsjyEchartRight = this.$echarts.init(this.$refs.tsjyEchartRight);
				// this.tsjyEchartRight.setOption(this.tsjyEchartRightOption);
				// tsjyEchartTools = tools.loopShowTooltip(this.tsjyEchartRight, this.tsjyEchartRightOption, {
				//     loopSeries: true
				// });

				this.rcglEchartLeft = this.$echarts.init(this.$refs.rcglEchartLeft);
				// this.rcglEchartLeft.setOption(this.rcglEchartLeftOption);

				this.rcglEchartRight = this.$echarts.init(this.$refs.rcglEchartRight);
				// this.rcglEchartRight.setOption(this.rcglEchartRightOption);
				// rcglEchartRightTools = tools.loopShowTooltip(this.rcglEchartRight, this.rcglEchartRightOption, {
				//     loopSeries: true
				// });
			}, 100)



			this.getData()

			// 监控页面大小变化更新页面
			uni.onWindowResize((res) => {
				this.$router.go(0)
			})
			
			setInterval(_=>{
				this.getData()
			},300000)
		},
		methods: {
			getData() {
				this.getGetProjList()
				this.getHomeTopData()
				this.getVehicleaccessData()
				this.getSuggestData()
				this.getInvestigateData()
				this.getPunchRecordData()
				this.getIncidentrecordList()
				this.getJSCarInfoList()
			},
			// 查询车辆登记名单管理
			getJSCarInfoList() {
				uni.request({
					url: this.url + 'api/largescreen/getJSCarInfoList?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: this.villageId,
						type: this.carListType,
						userType: 2,
						pageNum: this.carNowPage,
						pageSize: 10,
						key: this.carKeyword,
						sensitive: this.sensitive,
					},
					success: e => {
						console.log('查询车辆登记名单管理')
						console.log(e)
						if (e.data.code == 200) {
							const data = e.data.data
							this.carTotal = data.totalNum
							this.carList = data.result
						} else {
							uni.showToast({
								title: e.data.msg,
								icon: 'none'
							})
						}
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			// 确定搜索车辆登记列表
			searchCarList() {
				this.carNowPage = 1
				this.getJSCarInfoList()
			},
			// 重置搜索车辆登记列表
			resetCarList() {
				this.carNowPage = 1
				this.carListType = 0
				this.carKeyword = ''
				this.getJSCarInfoList()
			},
			// 车辆组件函数控制
			changeCarList(carNowPage) { // 获取当前分页
				this.carNowPage = carNowPage;
				this.getJSCarInfoList();
			},
			changeCarListSearch() { // 获取当前分页
				this.carNowPage = parseInt(this.carNowPageNum);
				this.getJSCarInfoList();
			},
			// 获取村委名称
			getGetProjList() {
				uni.request({
					url: this.url + 'api/largescreen/GetProjList?sensitive=' + this.sensitive,
					method: 'GET',
					data: {
						villageId: this.villageId,
					},
					success: e => {
						// console.log(e.data.data.result)
						this.villageName = e.data.data.result[0].villageName
						uni.setNavigationBarTitle({
							title: this.villageName
						})
					},
					fail: e => {
						// console.log(e)
					}
				})
			},
			changeVillage(id, index) {
				this.showVillageList = false
				this.selectVillageIndex = index
				this.villageId = id
				this.getData()
			},
			// 获取头部数据
			getHomeTopData() {
				const date = new Date()
				uni.request({
					url: this.url + 'api/largescreen/Hometop?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: this.villageId,
						year: date.getFullYear(),
						month: date.getMonth() + 1,
						sensitive: this.sensitive,
					},
					success: e => {
						// console.log(e.data.data)
						this.homeTopData = e.data.data
					},
					fail: e => {
						// console.log(e)
					}
				})
			},
			// 获取车流数据
			getVehicleaccessData() {
				uni.request({
					url: this.url + 'api/largescreen/Vehicleaccess?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: this.villageId,
						year: this.yearList[this.clllTime[0]],
						month: this.monthList[this.clllTime[1]],
						sensitive: this.sensitive,
					},
					success: e => {
						// console.log(e.data.data)
						const data = e.data.data
						this.clllEchartOption.xAxis.data = data.xAxis
						this.clllEchartOption.series[0].data = data.yAxis_InCar
						this.clllEchartOption.series[1].data = data.yAxis_OutCar
						this.clllEchartOption.series[2].data = data.yAxis_Practical
						// this.clllEchartOption.series[3].data = data.yAxis_Discounts
						this.clllEchartHear = {
							discountsAmount: data.discountsAmount,
							monthInCount: data.monthInCount,
							monthOutCount: data.monthOutCount,
							practicalAmount: data.practicalAmount,
							todayInCount: data.todayInCount,
							weekInCount: data.weekInCount,
						}
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			// 查询治安治理列表
			getIncidentrecordList() {
				uni.request({
					url: this.url + 'api/largescreen/getIncidentrecordList?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: this.villageId,
						year: this.zazlTimeType == '请选择' ? -1 : this.yearList[this.zazlTimeIndex[0]],
						month: this.zazlTimeType == '请选择' || !this.showZazlYearMonth ? -1 : this.monthList[this
							.zazlTimeIndex[1]],
						pageNum: this.nowPage,
						pageSize: 10,
						// userType: 2,
						sensitive: this.sensitive,
					},
					success: e => {
						console.log('查询治安治理列表')
						const data = e.data.data
						this.total = data.totalNum
						this.zazlList = data.result
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			resetZazl() {
				this.showZazlTimeType = false
				this.zazlTimeType = '请选择'
				this.showZazlTime = false
				this.showZazlYearMonth = -1
				this.zazlTime = '请选择日期'
				this.zazlTimeIndex = [9, 0]
				this.getIncidentrecordList()
			},
			searchZazl() {
				this.getIncidentrecordList()
			},
			showPic(index) { // 查看治安治理图片
				this.imageStatus = true
				this.zazlImageIndex = index
			},
			checkBigImg(index) { // 查看治安治理大图
				this.isImage = true
				this.imageIndex = index
			},
			checkBigVideo(index) {
				this.isVideo = true
				this.videoIndex = index
			},
			switchIndex(type) { // 切换图片
				if (type == 0 && this.imageIndex != 0) {
					this.imageIndex--;
				}
				if (type == 1 && this.imageIndex != this.zazlList[this.zazlImageIndex].pic.length - 1) {
					this.imageIndex++;
				}
			},
			switchVideoIndex(type) { // 切换视频
				if (type == 0 && this.videoIndex != 0) {
					this.videoIndex--;
				}
				if (type == 1 && this.videoIndex != this.zazlList[this.zazlImageIndex].video.length - 1) {
					this.videoIndex++;
				}
			},
			showClllTimeFn() {
				this.showClllTime = !this.showClllTime
				this.getVehicleaccessData()
			},
			showRcglTimeFn() {
				this.showRcglTime = !this.showRcglTime
				this.getInvestigateData()
				this.getPunchRecordData()
			},
			showRcglYearMonthFn(boolean) {
				this.showRcglYearMonth = boolean
				this.getInvestigateData()
				this.getPunchRecordData()
			},
			changeClllTime({
				detail: {
					value
				}
			}) {
				this.clllTime = value
			},
			changeTsjyTime({
				detail: {
					value
				}
			}) {
				this.tsjyTime = value
				this.getSuggestData()
			},
			changeRcglTime({
				detail: {
					value
				}
			}) {
				this.rcglTime = value
			},
			changeZazlTime({
				detail: {
					value
				}
			}) {
				this.zazlTimeIndex = value
			},
			confirmZazlTime() {
				if (this.zazlTimeType == '请选择') {
					this.showZazlTimeType = true
				} else {
					if (this.zazlTime == '确定') {
						if (this.showZazlYearMonth) {
							this.zazlTime = this.yearList[this.zazlTimeIndex[0]] + '年' + this.monthList[this.zazlTimeIndex[
								1]] + '月'
						} else {
							this.zazlTime = this.yearList[this.zazlTimeIndex[0]] + '年'
						}
						this.showZazlTimeType = false;
					} else {
						this.zazlTime = '确定'
					}
				}
			},
			// 获取投诉建议数据
			getSuggestData() {
				uni.request({
					url: this.url + 'api/largescreen/Suggest?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						isOperation: 0,
						villageId: this.villageId,
						year: this.yearList[this.tsjyTime[0]],
						month: this.monthList[this.tsjyTime[1]],
						sensitive: this.sensitive,
					},
					success: e => {
						const data = e.data.data
						this.swiperList = data.list
						console.log(data)
						this.tsjyHeadData = {
							total: data.total,
							assigned: data.assigned,
							followUp: data.followUp,
							finish: data.finish,
							overdue: data.overdue,
						}

						let arr = []
						if (data.assigned != 0) {
							arr.push({
								value: data.assigned,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							})
						}
						if (data.followUp != 0) {
							arr.push({
								value: data.followUp,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							})
						}
						if (data.finish != 0) {
							arr.push({
								value: data.finish,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							})
						}
						if (data.overdue != 0) {
							arr.push({
								value: data.overdue,
								name: '已逾期',
								itemStyle: {
									color: '#FD5421'
								}
							})
						}

						this.tsjyEchartLeftOption.series[0].data = arr;

						this.tsjyEchartRightOption.series[0].data = []
						for (let i = 0; i < data.subTypeGroup.length; i++) {
							this.tsjyEchartRightOption.series[0].data[i] = {
								value: data.subTypeGroup[i].value,
								name: data.subTypeGroup[i].name,
								itemStyle: {
									color: data.subTypeGroup[i].color
								}
							}
						}

					},
					fail: e => {
						// console.log(e)
					}
				})
			},
			// 获取日常管理数据
			getInvestigateData() {
				uni.request({
					url: this.url + 'api/largescreen/Investigate?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						isOperation: 0,
						villageId: this.villageId,
						year: this.yearList[this.rcglTime[0]],
						month: this.showRcglYearMonth ? this.monthList[this.rcglTime[1]] : -1,
						sensitive: this.sensitive,
					},
					success: e => {
						// console.log(e.data.data)
						const data = e.data.data
						this.rcglHeadData = {
							todayCount: data.todayCount,
							weekCount: data.weekCount,
							monthCount: data.monthCount,
						}

						let arr = []
						if (data.assigned != 0) {
							arr.push({
								value: data.assigned,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							})
						}
						if (data.followUp != 0) {
							arr.push({
								value: data.followUp,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							})
						}
						if (data.finish != 0) {
							arr.push({
								value: data.finish,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							})
						}
						if (data.overdue != 0) {
							arr.push({
								value: data.overdue,
								name: '已逾期',
								itemStyle: {
									color: '#FD5421'
								}
							})
						}

						this.rcglEchartLeftOption.series[0].data = arr;

						this.rcglEchartLeftOption.series[1].data = []
						for (let i = 0; i < data.subTypeGroup.length; i++) {
							this.rcglEchartLeftOption.series[1].data[i] = {
								value: data.subTypeGroup[i].value,
								name: data.subTypeGroup[i].name,
								itemStyle: {
									color: data.subTypeGroup[i].color
								}
							}
						}
					},
					fail: e => {
						// console.log(e)
					}
				})
			},
			// 组件函数控制
			change(nowPage) { // 获取当前分页
				this.nowPage = nowPage;
				this.getIncidentrecordList();
			},
			changeSearch() { // 获取当前分页
				this.nowPage = parseInt(this.nowPageNum);
				this.getIncidentrecordList();
			},
			// 获取巡更数据
			getPunchRecordData() {
				uni.request({
					url: this.url + 'api/largescreen/PunchRecord?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: this.villageId,
						year: this.yearList[this.rcglTime[0]],
						month: this.showRcglYearMonth ? this.monthList[this.rcglTime[1]] : -1,
						sensitive: this.sensitive,
					},
					success: e => {
						const data = e.data.data
						console.log(data)
						this.rcglEchartRightOption.xAxis.data = data.xAxisT
						this.rcglEchartRightOption.series[0].data = data.yAxisT
					},
					fail: e => {
						// console.log(e)
					}
				})
			},

			getTime() { // 获取时间
				const wMap = ['日', '一', '二', '三', '四', '五', '六', ]
				const date = new Date()
				const y = date.getFullYear()
				const m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
				const d = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
				const w = wMap[date.getDay()]
				const h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
				const min = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
				const s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
				this.time = h + ':' + min + ':' + s
				this.date = y + '-' + m + '-' + d + ' 星期' + w
			},
			getTemperature() { // 设置温度
				uni.request({
					url: "https://restapi.amap.com/v3/weather/weatherInfo?key=ecd60baf0cc86faf25642730ff682823&city=%E4%B8%AD%E5%B1%B1%E5%B8%82&extensions=base",
					success: (e) => {
						this.weather = e.data.lives[0].weather;
						this.temperature = e.data.lives[0].temperature_float + '­°C'
						// console.log('e', e);
					}
				})
			},
			checkDetail() {
				this.detailStatus = true;
			},
			clickType(type){
				this.showCarList = true
				this.carListType = type;
				this.searchCarList();
			},
			getQueryVariable(variable) {
				var query = window.location.href.substring(window.location.href.indexOf('?') + 1);
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == variable) {
						return pair[1];
					}
				}
				return (false);
			},
			hideTsjy() {
				this.showTsjyList = false
			},
			hideRcgl() {
				this.showRcglList = false
			},
			hideTfjl() {
				this.showTfjlList = false
			},
			resetList() {
				this.tsjyType = -1
				this.rcglType = -1
			}
		}
	}
</script>

<style>
	@import url(@/static/village.css);

	/* 图片底框 */
	.imageBox {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, .6);
	}

	.imageBox>view:nth-child(1) img {
		width: 4.6vw;
		height: 9.4vh;
	}

	.imageBox>view:nth-child(3) img {
		width: 4.6vw;
		height: 9.4vh;
	}



	.imageBox-cont {
		margin: 0 4.2vw;
		width: 52.1vw;
		padding: 2vh 0;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		background: rgba(7, 28, 51, 1);
	}

	.imageBox-cont>img {
		/* border: 1px solid black; */
		width: 30vw;
		max-width: 350px;
		/* height: 51.1vh; */
	}

	.imageBox-cont>video {
		/* border: 1px solid black; */
		width: 50vw;
		height: 60vh;
	}

	.imageBox-cont>view:nth-last-child(1) {
		position: absolute;
		/* border: 0.1vw solid black; */
		font-size: 1vw;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #D3F3FF;
		line-height: 1vw;
		bottom: -2vw;
	}


	.imageBox-sanMartin {
		position: absolute;
		/* border: 0.1vw solid black; */
		font-size: 1vw;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #D3F3FF;
		line-height: 1vw;
		top: -2vw;
	}

	.imageBox-sanMonitor {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 60;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, .6);
	}

	.imageBox-sanMonitor>view:nth-last-child(1) {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
	}

	.imageBox-sanMonitor-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.noData {
		width: 100%;
		height: 20vh;
		line-height: 20vh;
		text-align: center;
		/* border: 1px solid; */
		color: white;
		font-size: 1vw;
	}
</style>